<template>
  <d2-container>
    <!-- 弹出框 -->
    <el-dialog :title="isUpdate?'修改':'新增'" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主管" :label-width="formLabelWidth">
          <ScrollSelect
            v-model="form.leader"
            :defaultSelectedStr="defaultSelected"
            :get-list-methods="this.$api.USER_LIST_PAGE"
            :get-list-format="getListFormat"
            :clearable="true"
            search-key="name"
          />
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </template>
    </el-dialog>
    <!-- 按钮 -->
    <div>
      <el-button type="button" @click="open">新增</el-button>
      <el-button type="button">删除 </el-button>
      <!-- table -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="id" label="编号" width="150">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="name" label="部门" show-overflow-tooltip>
        </el-table-column>
         <el-table-column prop="leaderName" label="负责人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <!--
          :current-page 当前页数
          :page-size 每页条数
          :total 总共条数
         -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tablePages.currentPage"
          :page-size="tablePages.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tablePages.total"
        >
        </el-pagination>
      </div>
      <!-- <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination> -->
    </div>
  </d2-container>
</template>

<script>
import ScrollSelect from '@/components/ScrollSelect'
export default {
  name: 'deptmanager',
  components: {
    ScrollSelect
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      multipleSelection: [],
      // 控制弹出框展示与隐藏
      dialogFormVisible: false,
      // 绑定弹框中的表单数据
      form: {
        name: '',
        leader: 1
      },
      formLabelWidth: '120px',
      // 配置表格信息
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0,
        // 搜索框
        username: null
      },
      isUpdate: false,
      getListFormat: (data) => { // 下拉框数据格式
        const list = data.list
        console.log('list', list)
        return list.map(({ name, id }) => ({ label: name, value: id }))
      },
      defaultSelected: null
    }
  },

  created () {
    this.getTableList(this.tablePages)
  },
  // 分页
  methods: {

    getTableList ({ currentPage, limit, username }) {
      console.log(username)
      this.$request({
        url: 'dept/findAll',
        method: 'post',
        data: { currentPage, limit, data: { name: username } }
      }).then((res) => {
        // 给表格赋值
        this.tableData = res.list
        // 给表格总数赋值
        this.tablePages.total = res.total
      })
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    open () {
      this.dialogFormVisible = true
    },
    /**
     * 打开编辑弹框
     * @date 2021-12-16
     * @param {any} index 下标
     * @param {any} row 当前行对象
     */
    handleEdit (index, row) {
      this.dialogFormVisible = true
      this.isUpdate = true
      this.form = {
        id: row.id,
        name: row.name,
        leader: row.leader,
        parentId: row.parentId
      }
      this.defaultSelected = [{ label: row.leaderName, value: row.leader }]
    },

    /**
     * 列表删除操作
     * @date 2021-12-16
     * @param {any} index 当前对象下标
     * @param {any} row 当前行对象
     */
    handleDelete (index, row) {
      this.$request({
        url: 'user/' + row.name,
        method: 'delete',
        data: row
      }).then((res) => {
        this.$message.success((res && res.msg) || '删除成功')
        this.getTableList(this.tablePages)
      })
    },
    /**
     * 页码发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} currentPage 切换后的当前页码
     */
    handleCurrentChange (currentPage) {
      this.tablePages.currentPage = currentPage
      this.getTableList(this.tablePages)
    },
    /**
     * 页数发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} limit 切换后的每页条数
     */
    handleSizeChange (limit) {
      this.tablePages.limit = limit
      this.getTableList(this.tablePages)
    }
  }
}
</script>

<style scoped>
.block {
  float: right;
}

.inputBox {
  width: 25%;
}

.botton_souch {
  margin-left: 5%;
}
</style>
